<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-23 12:58:29
 * @LastEditTime: 2024-06-24 18:23:57
-->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';
import { useSwitch } from '@/hooks/index';
import { Plus, Edit, WarningFilled, Close, Upload } from '@element-plus/icons-vue';
import { toRefs, reactive, ref, onMounted, computed } from 'vue';
import { $t } from '@/plugins/i18n/index';
const props = defineProps({ edit: { type: Boolean, default: false } });
const { flag, close, open } = useSwitch();
const { fullscreen, rules, formData } = toRefs(
    reactive({
        fullscreen: false,
        formData: {
            parentId: '',
            companyId: '',
            type: 'M',
            title: '',
            icon: '',
            redirect: '',
            path: '',
            component: '',
            visible: 1,
            sort: 99
        },
        rules: {
            parentId: [{ required: true, message: $t(`outside.parent`, { prefix: $t(`placeholder.select`) }), trigger: 'click' }],
            companyId: [{ required: true, message: $t(`outside.company`, { prefix: $t(`placeholder.select`) }), trigger: 'click' }],
            title: [{ required: true, message: $t(`outside.menu.menuName`, { prefix: $t(`placeholder.enter`) }), trigger: 'click' }],
            icon: [{ required: true, message: $t(`outside.menu.icon`, { prefix: $t(`placeholder.select`) }), trigger: 'click' }],
            path: [{ required: true, message: $t(`outside.menu.path`, { prefix: $t(`placeholder.enter`) }), trigger: 'click' }]
        } as FormRules
    })
);
const formRef = ref<FormInstance>();
const handleClose = () => {
    close();
    radioChange('M');
};
const radioChange = (value: any) => {
    formRef.value?.resetFields();
    formData.value.type = value;
};
onMounted(() => {
    window.addEventListener('resize', function () {
        let screenWidth = this.window.innerWidth;
        screenWidth = window.innerWidth;
        screenWidth <= 768 ? (fullscreen.value = true) : (fullscreen.value = false);
    });
});

const options = reactive([
    { label: '图标一', value: 'peizhi' },
    { label: '图标一', value: 'biaoti' },
    { label: '图标一', value: 'liebiao' }
]);

const optionsTree = reactive([
    {
        value: 1,
        label: '用户管理',
        children: [
            {
                value: 2,
                label: '用户信息',
                children: []
            }
        ]
    }
]);

const submitChange = (formEl: FormInstance | undefined, data: any) => {
    if (!formEl) return;
    formEl.validate(valid => {
        if (valid) {
            if (props.edit) {
                //修改
            } else {
                //新增
            }
        }
    });
};
const title = computed(() => {
    if (props.edit) {
        return $t(`outside.menu.name`, { prefix: $t(`button.edit`) });
    }
    return $t(`outside.menu.name`, { prefix: $t(`button.add`) });
});
</script>
<template>
    <el-button :link="edit" type="primary" :icon="edit ? Edit : Plus" @click.stop.prevent="open">{{ edit ? $t(`button.edit`) : $t(`button.add`) }}</el-button>

    <el-dialog v-model="flag" destroy-on-close draggable :title="title" width="800px" :fullscreen="fullscreen" append-to-body :before-close="handleClose" style="border-radius: 10px" class="adapt-dialog">
        <div class="padding-top-bottom-20 padding-left-right-35">
            <el-form ref="formRef" :rules="rules" :model="formData" label-position="right" label-width="100px">
                <el-row :gutter="50">
                    <el-col :span="24">
                        <el-form-item :label="$t(`outside.menu.type`)" prop="type">
                            <el-radio-group v-model="formData.type" @change="radioChange">
                                <el-radio value="C" border>{{ $t(`outside.menu.typeOptions.catalogue`) }}</el-radio>
                                <el-radio value="M" border>{{ $t(`outside.menu.typeOptions.menu`) }}</el-radio>
                                <el-radio value="L" border>{{ $t(`outside.menu.typeOptions.link`) }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="$t(`outside.company`)" prop="companyId">
                            <el-tree-select v-model="formData.companyId" :data="optionsTree" :render-after-expand="false" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="$t(`parent`)" prop="parentId">
                            <el-tree-select v-model="formData.parentId" :data="optionsTree" :render-after-expand="false" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="formData.type == 'C' ? $t(`outside.menu.catalogueName`) : $t(`outside.menu.menuName`)" prop="title">
                            <el-input v-model="formData.title" :placeholder="formData.type == 'C' ? $t(`outside.menu.catalogueName`, { prefix: $t(`placeholder.enter`) }) : $t(`outside.menu.menuName`, { prefix: $t(`placeholder.enter`) })" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="$t(`outside.menu.icon`)" prop="icon">
                            <el-select-v2 v-model="formData.icon" :placeholder="$t(`outside.menu.icon`, { prefix: $t(`placeholder.enter`) })" :options="options" style="width: 100%">
                                <template #label="{ label, value }">
                                    <div class="flex-left">
                                        <span><i :class="`iconfont icon-` + value" style="font-size: 16px" /></span>
                                        <span style="font-weight: bold; padding: 0px 5px">{{ label }}</span>
                                    </div>
                                </template>
                                <template #default="{ item }">
                                    <div class="flex-space-between">
                                        <i :class="`iconfont icon-` + item.value" style="font-size: 16px" />
                                        <span>{{ item.label }}</span>
                                    </div>
                                </template>
                            </el-select-v2>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="$t(`outside.language`)" prop="title">
                            <el-input v-model="formData.title" :placeholder="formData.type == 'C' ? $t(`outside.language`, { prefix: $t(`placeholder.enter`) }) : $t(`outside.menu.menuName`, { prefix: $t(`placeholder.enter`) })" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="$t(`outside.sort`)" prop="title">
                            <el-input-number v-model="formData.sort" :min="0" controls-position="right" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12" v-show="formData.type === 'C'">
                        <el-form-item :label="$t(`outside.menu.redirect`)" prop="redirect">
                            <el-input v-model="formData.redirect" :placeholder="`/menu`" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t(`outside.menu.path`)" prop="path">
                            <el-input v-model="formData.path" :placeholder="`user`" clearable>
                                <template #prepend>{{ formData.type == 'L' ? 'http(s)://' : '/' }}</template>
                                <template #append>
                                    <el-popover placement="top-start" :width="20" trigger="hover" content="this is content, this is content, this is content">
                                        <template #reference>
                                            <WarningFilled style="width: 1em; height: 1em" :style="{ outline: 'none' }" class="pointer" />
                                        </template>
                                    </el-popover>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-show="formData.type !== 'L'">
                        <el-form-item :label="$t(`outside.menu.component`)" prop="component">
                            <el-input v-model="formData.component" :placeholder="`system/manage-group/menu/index`" clearable style="width: 100%">
                                <template #prepend>src/views/</template>
                                <template #append>
                                    <el-popover placement="top-start" :width="20" trigger="hover" content="this is content, this is content, this is content">
                                        <template #reference>
                                            <div class="flex-flex-start">
                                                .vue &nbsp;
                                                <WarningFilled style="width: 1em; height: 1em" :style="{ outline: 'none' }" class="pointer" />
                                            </div>
                                        </template>
                                    </el-popover>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="$t(`outside.menu.hideMenu`)" prop="visible">
                            <el-radio-group v-model="formData.visible">
                                <el-radio :value="1">{{ $t(`status.yes`) }}</el-radio>
                                <el-radio :value="0">{{ $t(`status.no`) }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :span="12">
                        <el-form-item :label="$t(`outside.state`)" prop="visible">
                            <el-radio-group v-model="formData.visible">
                                <el-radio :value="1">{{ $t(`status.enabled`) }}</el-radio>
                                <el-radio :value="0">{{ $t(`status.disable`) }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <el-button type="info" :icon="Close" auto-insert-space @click="handleClose">{{ $t(`button.cancel`) }}</el-button>
            <el-button type="primary" :icon="Upload" auto-insert-space @click="submitChange(formRef, formData)">{{ $t(`button.save`) }}</el-button>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
:deep(.ep-dialog) {
    --ep-dialog-border-radius: 20px !important;
    border-radius: 20px !important;
}
:deep(.ep-input-group__append) {
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--ep-color-primary);
    padding-left: 10px;
}
</style>
